<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts</title>
</head>
<script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../../node_modules/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
<script src="../../../node_modules/element-ui/lib/index.js"></script>
<script src="../static/js/index.js"></script>

<!-- 自定义css -->
<link rel="stylesheet" href="../static/css/electronicFont.css?version=1.0">
<link rel="stylesheet" href="../static/css/production.css?version=1.0">
<!-- 自定义js -->
<script src="../static/js/index.js?version=1.0"></script>

<!-- dev mock js -->
<script src="../../node_modules/mockjs/dist/mock.js"></script>
<script src="../static/js/mock_config.js"></script>
<style>
    * {
        color: white;
    }
    
    body {
        width: 100%;
        height: 100%;
        background-color: #0b0d20;
    }
</style>

<body>
    <div id="app">
        <!-- 头部信息 -->
        <header>
            <div class="navbar">
                <div class="card" style="width: 26rem; background-color: #2f415c; ">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h2>车间总人数：
                                <!-- 车间   管理 -->
                                <span id="WorkSum">0</span>
                            </h2>
                        </li>
                        <li class="list-group-item">
                            <hr style="margin: 0; background-color: #ffffff; position: relative;  top: -14px;" />
                            <div class="container">
                                <div class="row">
                                    <div class="col">
                                        <h4>直接生产：
                                            <span id="Work">0</span>
                                        </h4>
                                    </div>
                                    <div class="col">
                                        <h4>间接生产：
                                            <span id="IndirectWork">0</span>
                                        </h4>
                                    </div>

                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="card " style="width: 18rem; background-color: #955ba4;">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h4>待执行指示数</h4>
                        </li>
                        <li class="list-group-item">
                            <h2 id="WaitPrtQty">0</h2>
                        </li>
                    </ul>
                </div>
                <div class="card" style="width: 18rem; background: #2f415c;">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h4>未完成指示数</h4>
                        </li>
                        <li class="list-group-item">
                            <h2 id="Waitcompleted">0</h2>
                        </li>
                    </ul>
                </div>

                <div class="card" style="width: 18rem; background-color: #33814e;">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h4>生产中任务数</h4>
                        </li>
                        <li class="list-group-item">
                            <h2 id="PrtQty">0</h2>
                        </li>
                    </ul>
                </div>

                <div class="card" style="width: 18rem; background: #3074b2;">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h4>待入库任务数</h4>
                        </li>
                        <li class="list-group-item">
                            <h2 id="WaitInStock">0</h2>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <div class="wrapper">
            <div class="container-xl">
                <div class="row">
                    <!--  <div class="vi col WaitPrtDt">
                      <h5 class="WaitPrtQty">待执行</h5>
                        <el-table :data="WaitPrtDt" height="400" border style="width: 100%;" ref="WaitPrt">
                            <el-table-column prop="ClientName" align="center" label="客户">
                            </el-table-column>
                            <el-table-column prop="GoodsName" align="center" label="产品名称">
                            </el-table-column>
                            <el-table-column prop="Wk" align="center" label="生产周">
                            </el-table-column>
                            <el-table-column prop="QtySup" align="center" label="数量">
                            </el-table-column>
                        </el-table> 
                    </div> -->
                    <div class="vi col WaitPrtDt">
                        <h5 class="WaitPrtQty">未完成</h5>
                        <el-table :data="WaitPrtDt" height="400" border style="width: 100%;" ref="WaitPrt">
                            <el-table-column prop="GoodsName" align="center" label="产品名称">
                            </el-table-column>
                            <el-table-column prop="QtyProcess" align="center" label="任务数">
                            </el-table-column>
                            <el-table-column prop="QtyCompleted" align="center" label="完工数">
                            </el-table-column>
                            <el-table-column prop="QtyInStor" align="center" label="入库数">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="vi col PrtDt">
                        <h5 class="PrtQty">生产中</h5>
                        <el-table :data="PrtDt" border height="400" style="width: 100%;" ref="InPrt">
                            <el-table-column prop="GoodsSortName" align="center" label="产品类型">
                            </el-table-column>
                            <el-table-column prop="GoodsName" align="center" label="产品名称">
                            </el-table-column>
                            <el-table-column prop="Wait" align="center" label="数量">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="vi col WaitInStockDT">
                        <h5 class="WaitInStock">待入库</h5>
                        <el-table :data="WaitInStockDT" border height="400" style="width: 100%;" ref="InStock">
                            <el-table-column prop="GoodsSortName" align="center" label="产品类型">
                            </el-table-column>
                            <el-table-column prop="GoodsName" align="center" label="产品名称">
                            </el-table-column>
                            <el-table-column prop="Wait" align="center" label="数量">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>

            <div class="container-xl">
                <div class="row">
                    <div class="vi col">
                        <h5>员工当日价值 <span id="D_StaffValAvg"></span></h5>
                        <el-table :data="D_StaffValDt" :default-sort="{prop: 'WorkerValue', order: 'descending'}" border height="400" style="width: 100%;" ref="D_Staff">
                            <el-table-column prop="Name" align="center" label="姓名">
                            </el-table-column>
                            <el-table-column prop="WorkerValue" align="center" label="价值">
                            </el-table-column>
                            <el-table-column type="index" label="排序">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="vi col">
                        <h5>员工月价值<span id="M_StaffValAvg"></span></h5>
                        <el-table :data="M_StaffValDt" :default-sort="{prop: 'WorkerValue', order: 'descending'}" border height="400" style="width: 100%;" ref="M_Staff">
                            <el-table-column prop="Name" align="center" label="姓名">
                            </el-table-column>
                            <el-table-column prop="WorkerValue" align="center" label="价值">
                            </el-table-column>
                            <el-table-column type="index" label="排序">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="vi col">
                        <h5>员工年价值 <span id="Y_StaffValAvg"></span></h5>
                        <el-table :data="Y_StaffValDt" :default-sort="{prop: 'WorkerValue', order: 'descending'}" border height="400" style="width: 100%;" ref="Y_Staff">
                            <el-table-column prop="Name" align="center" label="姓名">
                            </el-table-column>
                            <el-table-column prop="WorkerValue" align="center" label="价值">
                            </el-table-column>
                            <el-table-column type="index" label="排序">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    function GetNavDate() {

        GetCodeData("VB21062310370955", "Get", 'number').then(function(res) {
                $('#Waitcompleted').text(res.rows[0].Column1)
            }),


            GetCodeData("VB21060317034935", "Get", 'number').then(function(res) {
                $('#WorkSum').text(res.rows[0].Column1)
            }),
            GetCodeData("VB21060415055893", "Get", 'number').then(function(res) {
                $('#Work').text(res.rows[0].Column1)
            }),

            GetCodeData("VB21060415063641", "Get", 'number').then(function(res) {
                $('#IndirectWork').text(res.rows[0].Column1)
            }),

            GetCodeData("VB21060510334888", "Get", 'number').then(function(res) {
                $('#WaitPrtQty').text(res.rows[0].Column1) //待生产
            }),
            GetCodeData("VB21060510414133", "Get", 'number').then(function(res) {
                $('#PrtQty').text(res.rows[0].Column1) //生产中
            }),
            GetCodeData("VB21060510442826", "Get", 'number').then(function(res) {
                $('#WaitInStock').text(res.rows[0].Column1) //入库数量
            }),
            GetCodeData("VB21060718050284", "Get", 'number').then(function(res) {
                $('#Y_StaffValAvg').text("平均【" + res.rows[0].Column1 + "】") // 员工当年平均价值 Y_StaffValAvg
            }),

            GetCodeData("VB21060516181624", "Get", 'number').then(function(res) {
                $('#M_StaffValAvg').text("平均【" + res.rows[0].Column1 + "】") // 员工当月平均价值
            }),
            GetCodeData("VB21060718073261", "Get", 'number').then(function(res) {
                $('#D_StaffValAvg').text("平均【" + res.rows[0].Column1 + "】") // 员工当日平均价值
            })

    }

    $(
        setTimeout(function() {
            GetNavDate()
        }, 0),
        setInterval(function() {
            GetNavDate()
        }, 30000)
    );
    new Vue({
        el: '#app',
        data() {
            return {
                // 产品
                WaitPrtDt: [],
                PrtDt: [],
                WaitInStockDT: [],
                // 员工价值
                Y_StaffValDt: [],
                M_StaffValDt: [],
                D_StaffValDt: []
            }

        },
        methods: {
            GetTabelDate(that) {
                //待生产  VB21060511320040
                // 未完成指示  
                GetCodeData("VB21062310292181", "Get", "Goods").then(function(res) {
                        that.WaitPrtDt = res.rows
                    })
                    // 生产中 
                GetCodeData("VB21060511522423", "Get", "Goods").then(function(res) {
                        that.PrtDt = res.rows
                    })
                    // 待入库
                GetCodeData("VB21060512022818", "Get", "Goods").then(function(res) {
                    that.WaitInStockDT = res.rows
                })

                // 员工当日价值
                GetCodeData("VB21060514384151", "Get", "StaffDt").then(function(res) {
                    that.D_StaffValDt = res.rows
                })

                // 员工月价值 
                GetCodeData("VB21060512223225", "Get", "StaffDt").then(function(res) {
                    that.M_StaffValDt = res.rows
                })

                // 员工当年价值
                GetCodeData("VB21060514375168", "Get", "StaffDt").then(function(res) {
                    that.Y_StaffValDt = res.rows
                })
            }
        },

        mounted() {
            // this.$refs.WaitPrt  this.$refs.InPrt  this.$refs.InStock  this.$refs.M_Staff this.$refs.Y_Staff this.$refs.D_Staff  this.$refs.M_Equipment  this.$refs.Y_Equipment   this.$refs.D_Equipment 
            TableAotoRoll([this.$refs.WaitPrt, this.$refs.InPrt, this.$refs.InStock, this.$refs.M_Staff, this.$refs.Y_Staff, this.$refs.D_Staff])
            var that = this
            setTimeout(function() {
                that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000*60);
        }
    })
</script>

</html>